<template>
  <div class="post-container">
    <!-- 顶部 -->
    <div class="post-header">
      <button class="cancel-btn" @click="handleCancel">取消</button>
      <button class="post-btn" :disabled="!canPost || isPublishing" @click="handlePost">
        {{ isPublishing ? '发布中...' : '发布' }}
      </button>
    </div>

    <!-- 内容区域 -->
    <div class="post-content">
      <!-- 文字输入 -->
      <div class="text-input-section">
        <textarea 
          v-model="postText" 
          class="text-input" 
          placeholder="Say something..."
          maxlength="1000"
          @input="updateCharCount"
        ></textarea>
        <div class="char-count">{{ charCount }}/1000</div>
      </div>

      <!-- 媒体上传区域 -->
      <div class="media-section">
        <!-- 视频（当存在时）-->
        <div v-if="video" class="video-container">
          <div class="video-item">
            <video :src="video.preview" controls></video>
            <button class="remove-btn" @click="removeVideo">×</button>
          </div>
        </div>

        <!-- 图片网格（当有图片时）-->
        <div v-if="images.length > 0" class="images-grid">
          <!-- 现有图片 -->
          <div v-for="(image, index) in images" :key="'img-' + index" class="image-item">
            <img :src="image.preview" :alt="`图片${index + 1}`" />
            <button class="remove-btn" @click="removeImage(index)">×</button>
          </div>
          
          <!-- 添加图片按钮 -->
          <el-upload
            v-if="images.length < 9"
            class="image-uploader"
            :auto-upload="false"
            :show-file-list="false"
            accept="image/*"
            multiple
            :on-change="handleImageChange"
          >
            <div class="add-media-btn">
              <i class="add-icon">+</i>
            </div>
          </el-upload>
        </div>

        <!-- 初始上传按钮（当无媒体时）-->
        <div v-if="!hasMedia" class="initial-upload">
          <div class="add-media-btn large" @click="showMediaDialog">
            <i class="add-icon">+</i>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部选项 -->
    <div class="bottom-options">
      <div class="option-item" @click="selectLocation">
        <i class="option-icon">📍</i>
        <span class="option-label">所在位置</span>
        <span v-if="location" class="option-value">{{ location }}</span>
        <span v-else class="option-value">未开启</span>
        <i class="arrow-icon">›</i>
      </div>

      <div class="option-item" @click="selectVisibility">
        <i class="option-icon">👥</i>
        <span class="option-label">谁可以看</span>
        <span class="option-value">{{ visibilityText }}</span>
        <i class="arrow-icon">›</i>
      </div>

      <!-- 之前的标签 -->
      <!-- <div v-if="previousTags.length > 0" class="previous-tags">
        <span class="tags-label">Previous Tag: </span>
        <span class="tags-value">{{ previousTags.join(', ') }}</span>
      </div> -->
    </div>

    <!-- 媒体选择对话框 -->
    <el-dialog
      v-model="mediaDialogVisible"
      title="选择媒体类型"
      width="300px"
      :show-close="false"
      align-center
    >
      <div class="media-dialog-content">
        <el-upload
          class="dialog-uploader"
          :auto-upload="false"
          :show-file-list="false"
          accept="image/*"
          multiple
          :on-change="handleImageChange"
        >
          <div class="media-option-btn">
            <i class="option-icon">📷</i>
            <span>Photo</span>
          </div>
        </el-upload>
        
        <el-upload
          class="dialog-uploader"
          :auto-upload="false"
          :show-file-list="false"
          accept="video/*"
          :on-change="handleVideoChange"
        >
          <div class="media-option-btn">
            <i class="option-icon">🎥</i>
            <span>Video</span>
          </div>
        </el-upload>
      </div>
      
      <template #footer>
        <el-button @click="hideMediaDialog">Cancel</el-button>
      </template>
    </el-dialog>

    <!-- 位置选择对话框 -->
    <el-dialog
      v-model="locationDialogVisible"
      title="选择位置"
      width="80%"
      :show-close="true"
      align-center
    >
      <div class="location-dialog-content">
        <!-- 不显示位置选项 -->
        <div class="location-option no-location" @click="clearLocation">
          <i class="location-icon">🚫</i>
          <span class="location-text">不显示位置</span>
        </div>
        
        <!-- 位置列表 -->
        <div class="location-list">
          <div class="location-list-title">
            <span v-if="nearbyLocations.length > 0">当前位置</span>
            <span v-else>正在获取当前位置...</span>
          </div>
          
          <div
            v-for="(item, index) in nearbyLocations"
            :key="index"
            class="location-option"
            @click="selectLocationItem(item)"
          >
            <i class="location-icon">📍</i>
            <div class="location-info">
              <div class="location-name">{{ item.name }}</div>
              <div class="location-address">{{ item.address }}</div>
            </div>
          </div>
          
          <div v-if="nearbyLocations.length === 0" class="no-locations">
            <p>正在定位中，请稍候...</p>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="locationDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>

    <!-- 可见性选择对话框 -->
    <el-dialog
      v-model="visibilityDialogVisible"
      title="谁可以看"
      width="70%"
      :show-close="true"
      align-center
    >
      <div class="visibility-dialog-content">
        <div class="visibility-option" @click="selectVisibilityType(0)">
          <i class="visibility-icon">🔒</i>
          <span class="visibility-text">私密</span>
          <i v-if="visibilityType === 0" class="selected-icon">✓</i>
        </div>
        
        <div class="visibility-option" @click="selectVisibilityType(1)">
          <i class="visibility-icon">🌍</i>
          <span class="visibility-text">公开</span>
          <i v-if="visibilityType === 1" class="selected-icon">✓</i>
        </div>
        
        <div class="visibility-option" @click="selectVisibilityType(2)">
          <i class="visibility-icon">👥</i>
          <span class="visibility-text">谁可以看</span>
          <span v-if="visibilityType === 2 && selectedAllowFriends.length > 0" class="friend-count">
            {{ selectedAllowFriends.length }}位好友
          </span>
          <i v-if="visibilityType === 2" class="selected-icon">✓</i>
        </div>
        
        <div class="visibility-option" @click="selectVisibilityType(3)">
          <i class="visibility-icon">🚫</i>
          <span class="visibility-text">谁不可以看</span>
          <span v-if="visibilityType === 3 && selectedDenyFriends.length > 0" class="friend-count">
            {{ selectedDenyFriends.length }}位好友
          </span>
          <i v-if="visibilityType === 3" class="selected-icon">✓</i>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="visibilityDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>

    <!-- 好友选择对话框 -->
    <el-dialog
      v-model="friendsDialogVisible"
      :title="selectedFriendType === 'allow' ? '选择可以看的好友' : '选择不可以看的好友'"
      width="80%"
      :show-close="true"
      align-center
    >
      <div class="friends-dialog-content">
        <div class="friends-list">
          <div
            v-for="friend in friendsList"
            :key="friend.id"
            class="friend-item"
            @click="toggleFriendSelection(friend)"
          >
            <div class="friend-checkbox" @click.stop>
              <el-checkbox 
                :model-value="isFriendSelected(friend)"
                @change="() => toggleFriendSelection(friend)"
              />
            </div>
            <div class="friend-avatar">
              <img :src="friend.avatar" alt="friend-avatar" width="40px" height="40px" />
            </div>
            <div class="friend-info">
              <div class="friend-name">{{ friend.username }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="friendsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmFriendsSelection">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 类型声明
declare global {
  interface Window {
    _AMapSecurityConfig: any
    AMap: any
  }
}

// 设置高德地图安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "1ab5c67ead273f8a27bc365fc75a8425",
}

import { ref, computed,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '@/utils/http'
import { ElMessage, ElCheckbox } from 'element-plus'

interface ImageFile {
  file: File
  preview: string
  url?: string // 上传后的URL
}

interface VideoFile {
  file: File
  preview: string
  url?: string // 上传后的URL
}

const router = useRouter()

// Data
const postText = ref('')
const charCount = ref(0)
const images = ref<ImageFile[]>([])
const video = ref<VideoFile | null>(null)
const location = ref('')
const mentions = ref<string[]>([])
const visibility = ref('All')
const mediaDialogVisible = ref(false)
const isPublishing = ref(false) // 发布状态

// 位置相关数据
const isLocation = ref(0) // 是否开启定位 0-不开启 1-开启
const longitude = ref('')
const latitude = ref('')
const address = ref('')
const locationDialogVisible = ref(false)
const nearbyLocations = ref<Array<{name: string, address: string, longitude: number, latitude: number}>>([])
const currentPosition = ref<{longitude: number, latitude: number} | null>(null)

// 可见性相关数据
const visibilityType = ref(1) // 0 私密 1 公开 2 谁可以看 3 谁不可以看
const visibilityDialogVisible = ref(false)
const friendsDialogVisible = ref(false)
const selectedFriendType = ref<'allow' | 'deny'>('allow') // 当前选择好友的类型
const selectedAllowFriends = ref<Array<{id: number, name: string, avatar: string}>>([]) // 谁可以看
const selectedDenyFriends = ref<Array<{id: number, name: string, avatar: string}>>([]) // 谁不可以看

const userId = ref(4)

// 模拟好友数据
const friendsList = ref([
])

// Computed
const hasMedia = computed(() => images.value.length > 0 || video.value !== null)
const canPost = computed(() => postText.value.trim().length > 0 || hasMedia.value)

// 可见性显示文本
const visibilityText = computed(() => {
  switch (visibilityType.value) {
    case 0: return '私密'
    case 1: return '公开'
    case 2: 
      if (selectedAllowFriends.value.length > 0) {
        return `${selectedAllowFriends.value.length}位好友可见`
      }
      return '谁可以看'
    case 3: 
      if (selectedDenyFriends.value.length > 0) {
        return `${selectedDenyFriends.value.length}位好友不可见`
      }
      return '谁不可以看'
    default: return '公开'
  }
})

// Methods
const updateCharCount = () => {
  charCount.value = postText.value.length
}

// 上传文件到服务器
const uploadFile = async (file: File): Promise<string | null> => {
  try {
    const formData = new FormData()
    formData.append('file', file)
    
    const response = await api.post('/moments/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (response.data && response.data.data) {
      return response.data.data // 返回文件URL
    }
    return null
  } catch (error) {
    console.error('文件上传失败:', error)
    return null
  }
}

// Media dialog functions
const showMediaDialog = () => {
  mediaDialogVisible.value = true
}

const hideMediaDialog = () => {
  mediaDialogVisible.value = false
}

// Element Plus upload handlers
const handleImageChange = async (uploadFileObj: any, uploadFiles: any[]) => {
  // Clear video if adding images
  video.value = null

  // 检查是否还有空间添加图片
  if (images.value.length >= 9) {
    console.log('最多只能上传9张图片')
    return
  }

  // 直接处理当前选择的文件
  const file = uploadFileObj.raw
  if (!file) return

  // 创建预览
  const preview = URL.createObjectURL(file)
  const imageItem: ImageFile = { file, preview }
  
  // 立即添加到数组中
  images.value.push(imageItem)
  
  // 异步上传文件
  uploadFile(file).then(url => {
    if (url) {
      imageItem.url = url
      console.log('图片上传成功:', url)
    }
  })
  
  // Close dialog if it's open
  if (mediaDialogVisible.value) {
    mediaDialogVisible.value = false
  }
}

const handleVideoChange = async (uploadFileObj: any) => {
  if (!uploadFileObj.raw) return
  
  // Clear images if adding video
  images.value.forEach(img => URL.revokeObjectURL(img.preview))
  images.value = []

  const file = uploadFileObj.raw
  const preview = URL.createObjectURL(file)
  const videoItem: VideoFile = { file, preview }
  video.value = videoItem
  
  // 异步上传视频文件
  uploadFile(file).then(url => {
    if (url && video.value) {
      video.value.url = url
      console.log('视频上传成功:', url)
    }
  })
  
  // Close dialog if it's open
  if (mediaDialogVisible.value) {
    mediaDialogVisible.value = false
  }
}

const removeImage = (index: number) => {
  URL.revokeObjectURL(images.value[index].preview)
  images.value.splice(index, 1)
}

const removeVideo = () => {
  if (video.value) {
    URL.revokeObjectURL(video.value.preview)
    video.value = null
  }
}

// 位置相关方法
const selectLocation = () => {
  locationDialogVisible.value = true
  // 每次打开弹窗都自动定位
  getCurrentLocation()
}

// 加载高德地图脚本
const loadMapScript = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve()
      return
    }
    
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=62beb8592d9ea57e01ebfe7299bac710&plugin=AMap.Geocoder,AMap.Geolocation'
    script.onerror = () => reject(new Error('Failed to load AMap script'))
    script.onload = () => resolve()
    document.head.appendChild(script)
  })
}

// 获取当前位置
const getCurrentLocation = async () => {
  try {
    // 清空之前的位置列表，显示加载状态
    nearbyLocations.value = []
    
    await loadMapScript()
    
    const geolocation = new window.AMap.Geolocation({
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 0,
      convert: true,
      showButton: false,
      showMarker: false,
      showCircle: false,
      panToLocation: false,
      zoomToAccuracy: false
    })

    geolocation.getCurrentPosition((status: string, result: any) => {
      if (status === 'complete') {
        currentPosition.value = {
          longitude: result.position.lng,
          latitude: result.position.lat
        }
        // 获取附近地址
        searchNearbyAddresses(result.position.lng, result.position.lat)
      } else {
        console.error('定位失败：', result)
        ElMessage.warning('定位失败，请手动输入地址搜索')
        // 定位失败时清空currentPosition，让用户知道定位状态
        currentPosition.value = null
      }
    })
  } catch (error) {
    console.error('获取定位失败：', error)
    ElMessage.error('定位服务不可用，请手动输入地址搜索')
    // 定位失败时清空currentPosition
    currentPosition.value = null
  }
}

// 搜索当前位置地址
const searchNearbyAddresses = async (lng: number, lat: number) => {
  try {
    const geocoder = new window.AMap.Geocoder()
    
    // 逆地理编码获取当前地址
    geocoder.getAddress([lng, lat], (status: string, result: any) => {
      if (status === 'complete' && result.regeocode) {
        const regeocode = result.regeocode
        nearbyLocations.value = []
        
        // 只添加当前精确位置
        nearbyLocations.value.push({
          name: '当前位置',
          address: regeocode.formattedAddress,
          longitude: lng,
          latitude: lat
        })
      }
    })
  } catch (error) {
    console.error('获取当前位置地址失败：', error)
  }
}


// 选择位置
const selectLocationItem = (item: any) => {
  isLocation.value = 1
  longitude.value = item.longitude.toString()
  latitude.value = item.latitude.toString()
  address.value = item.address
  location.value = item.name !== '当前位置' ? item.name : item.address
  locationDialogVisible.value = false
  ElMessage.success('位置选择成功')
}

// 清空位置
const clearLocation = () => {
  isLocation.value = 0
  longitude.value = ''
  latitude.value = ''
  address.value = ''
  location.value = ''
  locationDialogVisible.value = false
}

// 可见性相关方法
const selectVisibility = () => {
  visibilityDialogVisible.value = true
}

// 选择可见性类型
const selectVisibilityType = (type: number) => {
  visibilityType.value = type
  if (type === 2) { // 谁可以看
    selectedFriendType.value = 'allow'
    friendsDialogVisible.value = true
    visibilityDialogVisible.value = false
    getFriendList()
  } else if (type === 3) { // 谁不可以看
    selectedFriendType.value = 'deny'
    friendsDialogVisible.value = true
    visibilityDialogVisible.value = false
    getFriendList()
  } else {
    visibilityDialogVisible.value = false
  }
}

const getFriendList = async () => {
  const response = await api.get(`/relation/friends?userId=${userId.value}`)
  if (response.data && response.data.code == 200) {
    friendsList.value = response.data.data
  }
}



// 切换好友选择状态
const toggleFriendSelection = (friend: any) => {
  if (selectedFriendType.value === 'allow') {
    const index = selectedAllowFriends.value.findIndex(f => f.id === friend.id)
    if (index >= 0) {
      selectedAllowFriends.value.splice(index, 1)
    } else {
      selectedAllowFriends.value.push(friend)
    }
  } else {
    const index = selectedDenyFriends.value.findIndex(f => f.id === friend.id)
    if (index >= 0) {
      selectedDenyFriends.value.splice(index, 1)
    } else {
      selectedDenyFriends.value.push(friend)
    }
  }
}

// 检查好友是否被选中
const isFriendSelected = (friend: any) => {
  if (selectedFriendType.value === 'allow') {
    return selectedAllowFriends.value.some(f => f.id === friend.id)
  } else {
    return selectedDenyFriends.value.some(f => f.id === friend.id)
  }
}

// 确认好友选择
const confirmFriendsSelection = () => {
  friendsDialogVisible.value = false
}

const handleCancel = () => {
  // Clean up object URLs
  images.value.forEach(img => URL.revokeObjectURL(img.preview))
  if (video.value) {
    URL.revokeObjectURL(video.value.preview)
  }
  router.push('/moments')
}

const handlePost = async () => {
  if (!canPost.value || isPublishing.value) return

  isPublishing.value = true // 设置发布状态

  try {
    // 获取已上传的文件URL
    const imageUrls = images.value.map(img => img.url).filter(url => url)
    const videoUrl = video.value?.url

    // 确定类型：0 文本 1 图片 2 视频
    let type = 0 // 默认文本
    if (videoUrl) {
      type = 2 // 视频
    } else if (imageUrls.length > 0) {
      type = 1 // 图片
    }

    // 构建权限用户列表
    let permissionUserList: number[] = []
    if (visibilityType.value === 2) { // 谁可以看
      permissionUserList = selectedAllowFriends.value.map(f => f.id)
    } else if (visibilityType.value === 3) { // 谁不可以看
      permissionUserList = selectedDenyFriends.value.map(f => f.id)
    }

    // 构建请求参数
    const postData = {
      type: type,
      title: postText.value.trim(),
      fileUrl: type === 1 ? imageUrls.join(',') : (videoUrl || ''), // 图片用逗号分隔，视频直接是URL
      permission: visibilityType.value,
      userId: userId.value, 
      isLocation: isLocation.value,
      longitude: longitude.value,
      latitude: latitude.value,
      address: address.value,
      permissionUserList: permissionUserList
    }

    console.log('Publishing post:', postData)
    
    // 调用发布接口
    const response = await api.post('/moments/moment/publish', postData)
    
    if (response.data && response.data.code == 200) {
      console.log('发布成功')
      handleCancel()
    } else {
      console.error('发布失败:', response.data?.message || '未知错误')
    }
    
  } catch (error) {
    console.error('发布失败:', error)
  } finally {
    isPublishing.value = false // 重置发布状态
  }
}

const getUserIdFromToken = (token: string) => {
  if (!token) return '';
  try {
    const payloadBase64 = token.split('.')[1];
    const decoded = JSON.parse(atob(payloadBase64));
    return decoded.sub; 
  } catch (error) {
    console.error('Token解析失败:', error);
    return '';
  }
};

// 组件挂载时加载数据
onMounted(() => {
  const token = localStorage.getItem('token');
  if (!token) {
    ElMessage.warning('未检测到登录态，请先登录');
    return;
  }
  userId.value = getUserIdFromToken(token);
})
</script>

<style scoped>
.post-container {
  min-height: 100vh;
  background: white;
  display: flex;
  flex-direction: column;
}

/* 顶部 */
.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background: white;
  position: sticky;
  top: 0;
  z-index: 100;
}

.cancel-btn {
  background: none;
  border: none;
  font-size: 17px;
  color: #333;
  cursor: pointer;
}

.post-btn {
  background: #1aad19;
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.post-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.post-btn:not(:disabled):hover {
  background: #16941a;
}

/* 内容 */
.post-content {
  padding: 20px;
}

.text-input-section {
  position: relative;
  margin-bottom: 20px;
}

.text-input {
  width: 100%;
  min-height: 120px;
  border: none;
  outline: none;
  font-size: 17px;
  line-height: 1.4;
  resize: none;
  font-family: inherit;
  color: #333;
}

.text-input::placeholder {
  color: #999;
}

.char-count {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 12px;
  color: #999;
}

/* 媒体区域 */
.media-section {
  margin-bottom: 30px;
}

/* 视频容器 */
.video-container {
  margin-bottom: 15px;
}

.video-item {
  position: relative;
  max-width: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.video-item video {
  width: 100%;
  border-radius: 8px;
}

/* 图片网格 */
.images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 380px;
}

.image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 删除按钮 */
.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上传组件 */
.image-uploader, .video-uploader {
  aspect-ratio: 1;
}

.image-uploader :deep(.el-upload) {
  width: 100%;
  height: 100%;
}

.add-media-btn {
  width: 100%;
  height: 100%;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
  background: #fafafa;
}

.add-media-btn:hover {
  border-color: #1aad19;
  background: #f0f9f0;
}

.add-media-btn.large {
  height: 120px;
  max-width: 120px;
}

.add-icon {
  font-size: 32px;
  color: #999;
  font-style: normal;
  margin-bottom: 4px;
}

.upload-text {
  font-size: 14px;
  color: #666;
}

/* 初始上传 */
.initial-upload {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* 媒体对话框 */
.media-dialog-content {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

.dialog-uploader {
  flex: 1;
}

.dialog-uploader :deep(.el-upload) {
  width: 100%;
}

.media-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 20px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 100px;
  justify-content: center;
}

.media-option-btn:hover {
  border-color: #1aad19;
  background: #f0f9f0;
}

.option-icon {
  font-size: 32px;
  font-style: normal;
}

.media-option-btn span {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

/* 底部选项 */
.bottom-options {
  border-top: 1px solid #eee;
  background: white;
  padding: 0 20px 20px;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.option-item:last-child {
  border-bottom: none;
}

.option-icon {
  font-size: 20px;
  margin-right: 15px;
  width: 24px;
  text-align: center;
}

.option-label {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.option-value {
  font-size: 16px;
  color: #999;
  margin-right: 10px;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arrow-icon {
  font-size: 16px;
  color: #ccc;
  font-style: normal;
}

.previous-tags {
  padding: 15px 0;
  font-size: 14px;
}

.tags-label {
  color: #999;
}

.tags-value {
  color: #576b95;
}

/* 位置选择弹窗样式 */
.location-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}

.location-option {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
}

.location-option:hover {
  background-color: #f8f9fa;
}

.location-option.no-location {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 6px;
  margin-bottom: 15px;
}

.location-option.no-location:hover {
  background-color: #fff1f0;
}

.location-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.location-info {
  flex: 1;
}

.location-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 500;
}

.location-address {
  font-size: 14px;
  color: #999;
  line-height: 1.4;
}

.location-text {
  font-size: 16px;
  color: #333;
}



.location-list-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  padding: 0 10px;
  font-weight: 500;
}

.no-locations {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.no-locations p {
  margin: 0;
  font-size: 14px;
}

/* 可见性选择弹窗样式 */
.visibility-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}

.visibility-option {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.visibility-option:hover {
  background-color: #f8f9fa;
}

.visibility-option:last-child {
  border-bottom: none;
}

.visibility-icon {
  font-size: 18px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.visibility-text {
  flex: 1;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.friend-count {
  font-size: 14px;
  color: #999;
  margin-right: 10px;
}

.selected-icon {
  font-size: 16px;
  color: #1aad19;
  font-weight: bold;
}

/* 好友选择弹窗样式 */
.friends-dialog-content {
  max-height: 60vh;
  overflow-y: auto;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.friend-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.friend-item:hover {
  background-color: #f8f9fa;
}

.friend-item:last-child {
  border-bottom: none;
}

.friend-checkbox {
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}



.friend-avatar {
  font-size: 24px;
  margin-right: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f5f5f5;
  flex-shrink: 0;
}

.friend-info {
  flex: 1;
  min-width: 0;
}

.friend-name {
  font-size: 16px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .post-header {
    padding: 12px 15px;
  }
  
  .post-content {
    padding: 15px;
  }
  
  .text-input {
    font-size: 16px;
  }
  
  .bottom-options {
    padding: 0 15px 15px;
  }
  
  .option-value {
    max-width: 200px;
  }
  
  .images-grid {
    max-width: 320px;
  }
  
  .video-item {
    max-width: 250px;
  }
  
  .add-media-btn.large {
    height: 100px;
    max-width: 100px;
  }
  
  .media-dialog-content {
    gap: 15px;
    padding: 15px 0;
  }
  
  .media-option-btn {
    padding: 25px 15px;
    min-height: 80px;
  }
  
  .friend-item {
    padding: 12px 10px;
  }
  
  .friend-checkbox {
    margin-right: 12px;
  }
  
  .friend-avatar {
    font-size: 20px;
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
  
  .friend-name {
    font-size: 15px;
  }
}
</style>
